<template>
  <div id="playvideo">
    <div id="dplayer" ref="dplayer"></div>
    <div class="videoinfo">
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
import { getmvapi,getvideoapi } from "../network/songlist";
import DPlayer from "dplayer";

export default {
  name: "PlayVideo",
  data() {
    return {
      mvurl: null,
    };
  },
  methods: {
    playermv() {
      const dp = new DPlayer({
      container: document.getElementById("dplayer"),
      autoplay:true,
      video: {
        url: this.mvurl.url,
      },
    });
    }
  },
  watch: {
    'mvurl.url': {
      deep:true,
      handler(val) {
        this.playermv()
      }
    }
  },
  created() {
    /**
     * 视频： type = 1，否则为MV
     * 
     */
    if (this.$route.query.type == 1) {
      getvideoapi(this.$route.query.vid).then((res) => {
      this.mvurl = res.data.urls[0];
      //console.log(res.data.urls[0]);
    });
    }else {
      getmvapi(this.$route.query.vid).then(res => {
        this.mvurl = res.data.data
      })
    };
    
  },
  mounted() {
    //console.log(this.mvurl);
    //视频组件对象
    const dp = new DPlayer({
      container: document.getElementById("dplayer"),
      video: {
        url: "http://vodkgeyttp9.vod.126.net/cloudmusic/lnxq0sqo_3317215995_shd.mp4?ts=1655798021&rid=F7875FA069F29B62611F29B7599BEAD9&rl=3&rs=VUutVEZxwNBpnxxeFwpmCeaSEhUVBchh&sign=a7a7dea233c00bb2232c3286580db155&ext=i%2BMx4r2SAtGCss8z4y9%2F6w0vx44ggV5eD3cS9Kf2Ea623maUW9kVQ8YWn3Ts1%2FyxI9t8pUqGInGp3Fpeo%2FxDBMqU%2F%2FVc6u7wCOpIVNIF1L%2BNz8HRq5UEEHrEn8IrOwdwyBx5tPcpTD56PrQLgcgBmP5op2ozurYDpBNk3sQn4dLGtS5zZ1bKxjKOZk5QV4XAMCVk5wkW6f52cp8GQXK%2BgFlLT6VEWxDahuqU9CdpdCk7IHSnY7Way39wjg8fY0%2Bj",
      },
    });
  },
};
</script>

<style>
#playvideo{
  overflow: auto;
  height: 60vh;
}
#dplayer {
  width: 99%;
  height: 100%;
}
</style>